<!--
 * @Author: licongwei
 * @Date: 2022-03-28 11:14:15
 * @FileDescription: 首页
-->
<template>
  <div class="home">
    <p class="title">新疆价格监测预警平台</p>
    <img class="logo" src="./img/home-logo.png" alt="" />
    <ul class="items rotate-wrap">
      <li
        :class="['item', 'item' + (index + 1)]"
        v-for="(item, index) of listData"
        :key="index"
      >
        <router-link :to="item.path" custom v-slot="{ navigate }">
          <div
            class="outer"
            @click="
              () => {
                item.path && navigate()
              }
            "
          >
            <img class="icon" :src="iconImg(item.icon)" alt="" />
            <p class="name">{{ item.name }}</p>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'home',
  setup() {
    const listData = ref([
      {
        name: '总体情况',
        icon: 'icon1',
        path: '/M1'
      },
      {
        name: '价格走势',
        icon: 'icon2',
        path: '/M2'
      },
      {
        name: '开发中',
        icon: 'icon3',
        path: ''
      },
      {
        name: '开发中',
        icon: 'icon4',
        path: ''
      }
      // {
      //   name: '开发中',
      //   icon: 'icon5',
      //   path: ''
      // }
    ])
    const iconImg = (icon: string) => {
      return require(`./img/${icon}.png`)
    }

    // TODO:style动态绑定animation不生效
    return {
      listData,
      iconImg
    }
  }
})
</script>
<style lang="less" scoped>
.home {
  background: url('./img/home-bg.png') no-repeat;
  background-size: 100% 100%;
  .title {
    font-size: 36px;
    color: #fff;
    font-family: 'AliHYAiHei';
    text-align: center;
    background: url('./img/home-title-bg.png') no-repeat;
    background-size: 100% 100%;
    height: 102px;
    line-height: 80px;
  }
  .logo {
    position: absolute;
    top: 200px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    width: 550px;
    height: 362px;
  }
  ul.items {
    position: absolute;
    top: 305px;
    left: 50%;
    z-index: 1;
    width: 1240px;
    height: 600px;
    border-radius: 50%;
    transform: translateX(-50%);
    &:hover li.item {
      animation-play-state: paused;
    }
    li.item {
      position: absolute;
      width: 295px;
      height: 334px;
      background: url('./img/item-bg.png') no-repeat;
      cursor: pointer;
      overflow: hidden;
      .outer {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
        .icon {
          width: 110px;
          height: 110px;
          transform: scale(0.6);
          margin: 15px 0 75px 0;
        }
        .name {
          font-size: 22px;
          font-family: 'AliHYAiHei';
          color: #fff;
          text-align: center;
        }
      }
    }
  }
}

@keyframes animX {
  0% {
    left: 1020px;
  }
  100% {
    left: -60px;
  }
}

@keyframes animY {
  0% {
    top: 0px;
  }
  100% {
    top: 300px;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}

.item1 {
  // animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate,
  //   animY 15s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
  //   scale 30s cubic-bezier(0.36, 0, 0.74, 1) -15s infinite alternate;
  animation: animX 16s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
    animY 16s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate,
    scale 32s cubic-bezier(0.36, 0, 0.74, 1) -16s infinite alternate;
}

.item5 {
  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -13.5s infinite alternate,
    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -21s infinite alternate,
    scale 30s cubic-bezier(0.36, 0, 0.74, 1) -21s infinite alternate;
}

.item4 {
  // animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
  //   animY 15s cubic-bezier(0.36, 0, 0.64, 1) -27s infinite alternate,
  //   scale 30s cubic-bezier(0.36, 0, 0.74, 1) -27s infinite alternate;
  animation: animX 16s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate,
    animY 16s cubic-bezier(0.36, 0, 0.64, 1) -24s infinite alternate,
    scale 32s cubic-bezier(0.36, 0, 0.74, 1) -24s infinite alternate;
}

.item3 {
  // animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -25.5s infinite alternate,
  //   animY 15s cubic-bezier(0.36, 0, 0.64, 1) -33s infinite alternate,
  //   scale 30s cubic-bezier(0.36, 0, 0.74, 1) -33s infinite alternate;
  animation: animX 16s cubic-bezier(0.36, 0, 0.64, 1) -24s infinite alternate,
    animY 16s cubic-bezier(0.36, 0, 0.64, 1) -32s infinite alternate,
    scale 32s cubic-bezier(0.36, 0, 0.74, 1) -32s infinite alternate;
}

.item2 {
  // animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -31.5s infinite alternate,
  //   animY 15s cubic-bezier(0.36, 0, 0.64, 1) -39s infinite alternate,
  //   scale 30s cubic-bezier(0.36, 0, 0.74, 1) -39s infinite alternate;
  animation: animX 16s cubic-bezier(0.36, 0, 0.64, 1) -32s infinite alternate,
    animY 16s cubic-bezier(0.36, 0, 0.64, 1) -40s infinite alternate,
    scale 32s cubic-bezier(0.36, 0, 0.74, 1) -40s infinite alternate;
}
</style>
